<template>
  <div class="base-table-pagination">
    <a-table
      v-bind="$attrs"
      row-key="id"
      :data-source="props.tableData"
      :columns="props.columns"
      :row-selection="showSelectionColumn ? { onChange, onSelect, ...rowSelectionDefault, ...props.rowSelection } : null"
      :scroll="scroll"
      :sort-directions="sortDirections"
      :show-sorter-tooltip="showSorterTooltip"
      :size="size"
      :custom-row="onCustomRow"
      :show-size-changer="showSizeChanger"
      :pagination="pagination"
    >
      <!-- 个性化头部单元格 -->
      <template #headerCell="{ title, column }">
        <!-- 自定义表头icon -->
        <template v-if="column.dataIndex === 'actionIcon'">
          <a-tooltip title="自定义表头" color="#666">
            <setting-outlined @click.stop="onsetColunm" />
          </a-tooltip>
        </template>
        <slot name="headerCellArea" :scope="{ title, column }" />
      </template>

      <!-- 个性化单元格	 -->
      <template #bodyCell="{ column, index, text, record }">
        <!-- 操作列 -->
        <template v-if="column.dataIndex === 'action'">
          <template v-if="slots.actionColumn">
            <slot name="actionColumn" :scope="{ column, index, text, row: record }" />
          </template>
        </template>

        <!-- 针对列进行自定义处理 -->
        <slot name="selfColunm" :scope="{ column, index, text, row: record }" />

        <!-- 索引 -->
        <template v-if="column.dataIndex === 'index'">{{ index + 1 }}</template>
      </template>

      <!-- 表格底部总结栏 -->
      <template #summary>
        <slot name="summaryArea" />
      </template>

      <!-- 表格标题区域 -->
      <template v-if="toolbarControl.isTabbar" #title>
        <div class="tabel-toolbar flex flex-right">
          <!-- 自定义操作栏功能 -->
          <slot name="toolbarArea" />
          <a-button v-if="toolbarControl.import" type="primary" @click.stop="onImport">
            <template #icon><import-outlined /></template>
            导入
          </a-button>
          <a-button v-if="toolbarControl.export" type="primary" @click.stop="onExport">
            <template #icon><upload-outlined /></template>
            导出</a-button
          >
          <a-button v-if="toolbarControl.print" type="primary" @click.stop="onPrint"
            ><template #icon><printer-outlined /></template>打印</a-button
          >
          <a-button v-if="toolbarControl.export" type="primary" @click.stop="onDownloadTemplate">
            <template #icon><import-outlined /></template>
            下载模板
          </a-button>
        </div>
      </template>

      <!-- 表格尾部	 -->
      <template v-if="slots.footerArea" #footer>
        <slot name="footerArea" />
      </template>

      <!-- 表格额外展示的行，可设置表格嵌套表格 -->
      <template v-if="isexpandedRowRender" #expandedRowRender>
        <slot name="expandedRowRenderArea" />
      </template>
    </a-table>
  </div>
</template>
<script setup lang="ts">
import { useSlots } from "vue"
import { message } from "ant-design-vue"
const props = defineProps({
  // 表格列
  columns: {
    type: Array,
    default: () => [],
  },
  // 表格数据
  tableData: {
    type: Array,
    default: () => [],
  },

  //表格水平和垂直滚动设置
  scroll: {
    type: Object,
    default: () => ({
      x: 2100,
      y: 560,
    }),
  },

  //列表项选择
  rowSelection: {
    type: Object,
    default: () => ({}),
  },

  //表格操作tabbar传入的参数
  toolbar: {
    type: Object,
    default: () => ({}),
  },

  //表格操作tabbar功能对应接口
  toolbarAPI: {
    type: Object,
    default: () => ({
      exportAPI: "/export",
      importAPI: "/import",
      templateAPI: "/template",
    }),
  },

  //表头是否显示下一次排序的 tooltip 提示
  showSorterTooltip: {
    type: Boolean,
    default: false,
  },

  //支持的排序方式，取值为 ascend descend
  sortDirections: {
    type: Array,
    default: () => ["ascend"],
  },

  //表格进行内嵌内容(表格行下面展示一个新表格)
  isexpandedRowRender: {
    type: Boolean,
    default: false,
  },
  //表格大小
  size: {
    type: String,
    default: "middle",
  },
  //设置选择列显示和隐藏
  showSelectionColumn: {
    type: Boolean,
    default: false,
  },

  //是否展示表格分页，默认展示
  showSizeChanger: {
    type: Boolean,
    default: true,
  },

  //表格的分页配置
  pagination: {
    type: Object,
    default: () => ({
      //只有一页时是隐藏分页器
      hideOnSinglePage: true,
      pageSizeOptions: ["10", "20", "30", "40"],
    }),
  },
})

const emits = defineEmits<{
  (e: "on-table-change", ids: number[]): void
  (e: "on-set-column"): void
  (e: "on-row-click", record: object, i: number): void
  (e: "on-row-mouseenter", record: object, i: number): void
  (e: "on-row-mouse-leave", record: object, i: number): void
}>()

const slots = useSlots()

//表格操作tabbar控制对象
const toolbarControl = {
  export: true,
  import: true,
  print: true,
  downloadTemplate: false,
  isTabbar: true,
  ...props.toolbar,
}

//行选择功能默认配置
const rowSelectionDefault = {
  columnTitle: props.rowSelection.type === "radio" ? "选择" : "",
  type: "checkbox",
  columnWidth: 100,
  //选择框的默认属性配置,依据行的disabled值进行逻辑处理 {表格disabled为true,则该行不参与选择}
  getCheckboxProps(record: any) {
    return {
      disabled: record.disabled,
    }
  },
}

/**
 * 选中项发生变化时的回调
 * @param ids {{array}} 以条目的id组成的数组
 * @param idsObj  {{array}} 条目组成的数组
 */
const onChange = (selectedRowKeys: Array<number>, selectedRows: Array<any>): void => {
  emits("on-table-change", selectedRowKeys)
}

/**
 * 	用户手动选择/取消选择某列的回调
 * @param ids {{array}} 以条目的id组成的数组
 * @param idsObj  {{array}} 条目组成的数组
 */
const onSelect = (record: object, selected: boolean): void => {
  console.log("onSelect ...", record, selected)
}

//导入
const onImport = (): void => {
  console.log("onImport ....", props.toolbarAPI?.exportAPI)
  message.success("导入成功")
}

//导出
const onExport = (): void => {
  console.log("onExport ....")
  message.success("导出成功")
}

//打印表格
const onPrint = (): void => {
  console.log("onPrint ....")
}

//下载表格模板
const onDownloadTemplate = (): void => {
  console.log("onDownloadTemplate ....")
  message.success("下载表格模板成功")
}

//设置自定以表格
const onsetColunm = (): void => {
  console.log("onsetColunm ...")
  emits("on-set-column")
}

//自定义设置行属性
const onCustomRow = (record: object, i: number): any => {
  return {
    onClick: (event: EventTarget): void => {
      console.log("row-click")
      emits("on-row-click", record, i)
    },

    onMouseenter: (event: EventTarget): void => {
      console.log("row-mouseenter")
      emits("on-row-mouseenter", record, i)
    },

    onMouseleave: (event: EventTarget): void => {
      console.log("row--mouse-leave")
      emits("on-row-mouse-leave", record, i)
    },
  }
}
</script>

<style scoped lang="less">
.base-table-pagination {
  .tabel-toolbar {
    :deep(.ant-btn) {
      margin-left: 10px;
    }
  }
  :deep(.ant-table-wrapper) {
    .ant-table-thead {
      .ant-table-cell {
        font-weight: bold;
      }
    }
  }
}
</style>
